/**
 * 用户列表
 */
import React from 'react';
import styles from './index.less';
import { connect, connectMaster, history } from 'umi';
import Apijurisdiction from './Jurisdiction/Apijurisdiction';
import DataJurisdiction from './Jurisdiction/DataJurisdiction';
import { Button, Form, Input, Space, Select } from 'antd';
import Popup from './Popup';
import { NumberOutlined, SearchOutlined } from '@ant-design/icons';
import { getMasterCommonPkg } from '@/utils/masterData';
const {
  utils: {
    otherUtil: { authorityVerify },
  },
} = getMasterCommonPkg();

@connectMaster //接收主服务数据
@connect(({ MyRole }) => ({
  MyRole,
}))
export default class extends React.Component {
  state = {
    btnType: '数据源权限',
    dataInput: '',
  };
  formRef = React.createRef();
  componentDidMount = async () => {
    const { dataInput } = this.state;
    const { pageNum, pageSize, apiPageNum, apiPageSize } = this.props.MyRole;
    this.getDataType();
    this.getMemberList(); //获取所有空间
    this.getApiSoure(dataInput, apiPageNum, apiPageSize); //api详情
    this.getdataSoure(dataInput, pageNum, pageSize); //页面加载获取数据源数据
  };

  //更新状态
  changeState = obj => {
    this.props.dispatch({
      type: 'MyRole/setState',
      payload: obj,
    });
  };

  // 获取所有数据源数据
  getdataSoure = async (dataInput, pageNum, pageSize) => {
    let rs = await this.props.dispatch({
      type: 'MyRole/getdataSoure',
      payload: {
        pageNum,
        pageSize,
        name: { name: dataInput },
      },
    });
    if (rs.success) {
      this.changeState({
        dataList: rs.data.dataList,
        total: Number(rs.data.total),
        // total: 20,
        pageNum: Number(rs.data.pageNum),
        pageSize: Number(rs.data.pageSize),
      });
    }
  };

  // 获取所有api数据
  getApiSoure = async (dataInput, apiPageNum, apiPageSize) => {
    let rs = await this.props.dispatch({
      type: 'MyRole/getApiSoure',
      payload: {
        pageNum: apiPageNum,
        pageSize: apiPageSize,
        name: { name: dataInput },
      },
    });
    // console.log(rs.data,"api数据")
    if (rs.success) {
      this.changeState({
        apiList: rs.data.dataList,
        apiTotal: Number(rs.data.total),
        apiPageNum: Number(rs.data.pageNum),
        apiPageSize: Number(rs.data.pageSize),
      });
    }
  };

  //查询所有的数据源类型
  getDataType = async () => {
    var rs = await this.props.dispatch({
      type: 'MyRole/getDataType',
    });
    if (rs.success) {
      this.changeState({
        allDataTypeList: rs.data,
      });
    }
  };

  // 查询所有工作空间名  权限申请弹窗使用数据
  getMemberList = async () => {
    let rs = await this.props.dispatch({
      type: 'MyRole/getMemberList',
    });
    if (rs.success) {
      this.changeState({
        workSpaceName: rs.data,
      });
    }
  };

  render() {
    const { pageNum, pageSize, apiPageNum, apiPageSize } = this.props.MyRole;
    const { dataInput, btnType } = this.state;
    return (
      <div className={styles.TableContain}>
        <div className={styles.FormTable}>
          {
            <div className={styles.FormTableBtn}>
              <Space>
                <Button
                  type={btnType === '数据源权限' ? 'primary' : ''}
                  onClick={() => {
                    this.setState({
                      btnType: '数据源权限',
                    });
                    // this.getMyRoleList(1);
                    this.getdataSoure(dataInput, pageNum, pageSize);
                  }}
                >
                  数据源权限
                </Button>
                <Button
                  type={btnType === 'API权限' ? 'primary' : ''}
                  onClick={() => {
                    this.setState({
                      btnType: 'API权限',
                    });
                    this.getApiSoure(dataInput, apiPageNum, apiPageSize);
                  }}
                >
                  API权限
                </Button>
              </Space>
            </div>
          }
          <div className={styles.AllSeach}>
            {btnType === 'API权限' ? (
              <div className={styles.Seach}>
                <div className={styles.SeachLeft}>
                  <span className={styles.SeachText}>API名称 :</span>
                  <div className={styles.SeachRight}>
                    <Input
                      allowClear
                      placeholder="Api名称"
                      bordered={false}
                      style={{ width: '240px', outline: 'none' }}
                      defaultValue=""
                      onChange={e => {
                        this.setState({
                          dataInput: e.target.value,
                        });
                        // e.target.value = this.state.dataInput;
                      }}
                    />
                    <SearchOutlined
                      style={{
                        fontSize: '16px',
                        color: '#A6A6A6',
                        margin: '8px 12px',
                      }}
                      onClick={() => {
                        this.getApiSoure(dataInput, apiPageNum, apiPageSize);
                        this.setState({
                          dataInput: '',
                        });
                      }}
                    ></SearchOutlined>
                  </div>
                </div>
              </div>
            ) : (
              <div className={styles.Seach}>
                <div className={styles.SeachLeft}>
                  <span className={styles.SeachText}>数据源名称 :</span>
                  <div className={styles.SeachRight}>
                    <Input
                      allowClear
                      style={{ width: '240px', outline: 'none' }}
                      bordered={false}
                      defaultValue=""
                      placeholder="数据源名称"
                      onChange={e => {
                        this.setState({
                          dataInput: e.target.value,
                        });
                        // e.target.value = this.state.dataInput;
                      }}
                    />
                    <SearchOutlined
                      style={{
                        fontSize: '16px',
                        color: '#A6A6A6',
                        margin: '8px 12px',
                      }}
                      onClick={() => {
                        this.getdataSoure(dataInput, pageNum, pageSize);
                        this.setState({
                          dataInput: '',
                        });
                      }}
                    ></SearchOutlined>
                  </div>
                </div>
                <div className={styles.applyBtn}>
                  <Button
                    type="primary"
                    onClick={() => {
                      if (!authorityVerify('APPLY_DATA_SOURCE')) return;
                      this.changeState({
                        addVisible: true,
                        addVisibleModalType: 'apply',
                      });
                    }}
                  >
                    权限申请
                  </Button>
                </div>
              </div>
            )}
          </div>
        </div>
        <div className={styles.AllTableList}>
          {btnType === 'API权限' ? (
            <Apijurisdiction parentThis={this} />
          ) : (
            <DataJurisdiction parentThis={this} />
          )}
        </div>
        {/* 弹窗 */}
        <Popup parentThis={this} />
      </div>
    );
  }
}
